<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>	
<script type="../resources/js/json2.js"></script>
<body>
	
	
	<!-- 우편주소 검색 -->
		<h2>주소찾기</h2>
		동입력<input type="text" name="dong" onkeydown="if(event.keyCode == 13) findPost()"/><br/>
		<!-- <input type="button" id="findBtn" value="검색" /> 검색키 아예 안 만들고 엔터키로만 검색-->
		<form method="post" id="addrForm" >
			우편번호<input type='text' name='post' readonly="readonly" /><br/>
			주소<input type='text' name='addr1' readonly="readonly" size="50"/><br/>
			나머지 주소<input type='text' name='addr2' size="50" /><br/>
			<button type="submit" id="btnSave" class="btn">입력완료</button>
		</form>
	
	<div id="postDiv">	
	</div>
	
	
	<script>
		 
		/* $('#findBtn').click(function(){
			postFind();
		}); */
		
		function findPost(){
			
			var innerHTML = "";
			$.post('zipcode/searchcode',{dong : $('input[name=dong]').val()}).done(function(data){
				for(var i=0, len=data.length;i<len;i++){
		    		if (data[i].ri == null) {
		    			data[i].ri = "";
		    		} 
		    		if (data[i].bldg == null) {
		    			data[i].bldg = "";
		    		}
		    		if(data[i].bunji == null) {
		    			data[i].bunji = "";
		    		}
		    				
		    		var addr1 = data[i].sido +"&nbsp"+ data[i].gugun +"&nbsp"+ data[i].dong +"&nbsp"+ data[i].ri;
		    		var addr2 = data[i].bldg +"&nbsp"+ data[i].bunji + "&nbsp";
					innerHTML += "<ul>";
					innerHTML += "	<li data-val='"+data[i].zipcode+"' class='code'>"+data[i].sido +"&nbsp"+ data[i].gugun +"&nbsp"+ data[i].dong +"&nbsp"+ data[i].ri +"&nbsp"+ data[i].bldg +"&nbsp"+ data[i].bunji;
					innerHTML += "	<input type='hidden' data-addr1='"+addr1+"' data-addr2='"+addr2+"' class='addr'/>";
					innerHTML += "	&nbsp&nbsp<button class='btn'>선택</button></li>";
					innerHTML += "</ul>";						
				}
				$('#postDiv').html(innerHTML);
			});
		}

		$('#postDiv').delegate('.btn', 'click', function(){
			$('html, body').animate({ scrollTop: 0 }, 500);
			$('input[name=post]').val($(this).parent().attr('data-val'));
			$('input[name=addr1]').val($(this).prev().attr('data-addr1'));
			$('input[name=addr2]').val($(this).prev().attr('data-addr2'));
			$('#postDiv').html("");
		});
		
		$('#addrForm').on('click', '#btnSave', function(event) {
			$.post('' , JSON.parse(JSON.stringify($(addrForm).serializeObject()))).done(function(data) {
				
			});
		});
	

	
	</script>
</body>
</html>